<template>
  <div>
    <Title :title="title"></Title>
    <div style="height: 200px;" ref="box22"></div>
  </div>
</template>

<script setup>
import { Column } from '@antv/g2plot';
import Title from './Title.vue';
import { ref, onMounted } from 'vue';
import { get } from '@/utils/request'
const box22 = ref(null);

let temr2 = ref([]);
const title = ref(' 实时工程设备数量 ');
const shiftLine = () => {
  const columnPlot = new Column(box22.value, {
    data: temr2.value,
    xField: 'type',
    yField: 'value',

    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: 'pink',
        opacity: 1,
      },
    },
    xAxis: {
      label: {
        style: {
          fill: 'pink'
        },
        fontSize: 1,
        rotate: 75,
        autoHide: false,
        autoRotate: false
      },
    },
    yAxis: {
      label: {
        //旋转
        style: {
          fill: 'pink'
        }
      }
    },
    meta: {
      type: {
        alias: '类别',
      },
      sales: {
        alias: '销售额',
      },
    },
  });
  columnPlot.render();




};
const getR2 = async () => {
  let response = await get('/dashboard/queryEngineerBindDeviceNumber', {
    page: 1,
    pageSize: 10
  });

  temr2.value = response.data;
}
onMounted(async () => {
  await getR2();
  shiftLine();
})

</script>

<style scoped lang="less"></style>
